<template>

  <header class="herder">
    <div class="home-box">
      <div class="home-herder">
        <div class="logo">
          <img src="https://admin.hqx.com.cn/Public/App/image/web-logo.png" alt="">
        </div>
        <div class="header-search">
          <input v-model="searchValue" @keyup.enter="toSearch" type="text" placeholder="请输入目的地、主题或目的地"
            class="header-ipt">
          <div @click="toSearch" class="search-btn pointer-style-pointer">
            <i class="iconfont icon-a-Group1335"></i>
          </div>
        </div>

        <div class="correlation">
          <!-- <span class="correlation-welcome">环球行国际旅行社欢迎您!</span> -->
          <router-link to="/about/weixin" target="_blank" class="correlation-text program-hover">小程序
            <div class="correlation-program">
              <img src="https://admin.hqx.com.cn/Public/App/image/WeChatminiProgram.jpg" alt="" class="wx-QR-code">
              <div class="wx-tip">微信扫描二维码</div>
            </div>

          </router-link>
          <router-link to="/about/weixin" target="_blank" class="correlation-text official-accounts-hover">公众号
            <div class="correlation-official-accounts">
              <img src="https://admin.hqx.com.cn/Public/App/image/Official%20Accounts%20QR%20code.jpg" alt=""
                class="wx-QR-code">
              <div class="wx-tip">微信扫描二维码</div>
            </div>
          </router-link>
          <router-link to="/about" target="_blank" class="correlation-text">企业简介</router-link>
          <a @click="toLogin" v-if="!userShow" class="correlation-login" href="javascript:void(0)">登录/注册</a>
          <div v-else class="correlation-user "> {{ userData.username || '尊敬的会员' }}
            <div class="user-list">
              <!-- <div><router-Link to="/">个人中心</router-Link></div>
              <div><router-Link to="/">我的收藏</router-Link></div>
              <div><router-Link to="/">我的订单</router-Link></div> -->
              <div @click="removeUser"><a href="javascript:void(0)">退出登录</a></div>
            </div>
          </div>

        </div>
      </div>
      <!-- 导航 -->

      <nav class="home-nav">
        <div class="nav-item" @mouseenter.stop="navEnter(1)" @mouseleave="leaveSecondaryList()">
          <router-link to="/" :class="navIndex == 1 ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">首页
            <div></div>
          </router-link>
        </div>
        <div class="nav-item" @mouseenter="navEnter(2)" @mouseleave="leaveSecondaryList()">
          <router-link to="/outbound"
            :class="navIndex == 2 ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">出境游</router-link>

          <div v-show="navItemShow == 2" class="secondary-list secondary-list-hover">
            <ul class="secondary-list-ul">
              <li v-for="rs in areasForeign" :key="rs.id">
                <router-Link :to="`/line/${rs.id}`" target="_blank" class="">
                  <span @mouseenter="foreignEnter(rs.id)" class="secondary-list-lv-two">
                    {{ rs.title }}</span>
                </router-link>
              </li>
            </ul>
            <!-- 三级内容 -->
            <div v-if="threeIndex == 2" class="three-level-list three-level-list-hover">
              <!-- {{ threeLvForeign }} -->
              <router-link v-for="(item, index) in threeLvForeign.areas" :key="item.id" :to="`/line/${item.id}`"
                target="_blank" class="lv-three-areas ">
                {{ item.title }}
                <span v-if="item.hot" class="hot-tip iconfont icon-hot-tip"></span>
              </router-link>
            </div>
          </div>

        </div>
        <div class="nav-item" @mouseenter="navEnter(3)" @mouseleave="leaveSecondaryList()">
          <router-link to="/domestic"
            :class="navIndex == 3 ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">国内游</router-link>
          <!-- 二级 -->
          <div v-show="navItemShow == 3" class="secondary-list">
            <!-- <div v-show="true" class="secondary-list"> -->
            <div class="secondary-list-new">
              <ul>
                <li v-for="rs in areasDomestic" :key="rs.id">
                  <div class="secondary-list-new-title">{{ rs.title }}</div>
                  <div class="secondary-a-new">
                    <router-Link v-for="(item, index) in rs.areas" :to="`/line/${item.id}`" target="_blank">
                      {{ item.title }}
                      <span v-if="item.hot" class="hot-tip iconfont icon-hot-tip"></span>
                    </router-Link>
                    <!-- <router-Link to="">云南</router-Link>
                    <router-Link to="">云南</router-Link>
                    <router-Link to="">云南</router-Link>
                    <router-Link to="">云南</router-Link> -->
                  </div>
                </li>

              </ul>
            </div>
            <!-- <ul class="secondary-list-ul">
              <li v-for="rs in areasDomestic" :key="rs.id">
                <span @mouseenter="domesticEnter(rs.id)" class="secondary-list-lv-two">
                  {{ rs.title }}</span>
              </li>
            </ul> -->
            <!-- 三级内容 -->
            <!-- <div v-if="threeIndex == 3" class="three-level-list-domestic">
              <router-link v-for="(item, index) in threeLvDomestic.areas" :key="item.id" :to="`/line/${item.id}`"
                target="_blank" class="lv-three-areas-domestic ">
                {{ item.title }}
              </router-link>
            </div> -->
          </div>
        </div>
        <div class="nav-item" @mouseenter="navEnter(4)" @mouseleave="leaveSecondaryList()">
          <router-link to="/periphery"
            :class="navIndex == 4 ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">周边游</router-link>
          <div v-show="navItemShow == 4" class="secondary-list">
            <ul class="periphery-list-ul periphery-periphery">
              <li v-for="rs in Guangdong" :key="rs.id">
                <router-link :to="`/line/${rs.id}`" target="_blank" class="">
                  <span style=" position: relative;">{{ rs.title }}
                    <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                  </span>
                </router-link>
              </li>
            </ul>
          </div>

        </div>
        <div class="nav-item" @mouseenter="navEnter(5)" @mouseleave="leaveSecondaryList()">
          <router-link to="/theme"
            :class="navIndex == 5 ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">主题游</router-link>
          <div class="secondary-list">
            <ul v-show="navItemShow == 5" class="secondary-list-ul">
              <li>
                <router-link to="/theme/list/10" class="secondary-list-lv-two lv-two-theme">海岛
                  <span class="theme-hot-tip iconfont icon-hot-tip"></span>
                </router-link>
              </li>
              <li>
                <router-link to="/theme/list/11" class="secondary-list-lv-two lv-two-theme">亲子</router-link>
              </li>
              <li>
                <router-link to="/theme/list/5" class="secondary-list-lv-two lv-two-theme">团建
                  <span class="theme-hot-tip iconfont icon-hot-tip"></span></router-link>
              </li>
              <li>
                <router-link to="/theme/list/9" class="secondary-list-lv-two lv-two-theme">蜜月</router-link>
              </li>
              <li>
                <router-link to="/theme/list/16" class="secondary-list-lv-two lv-two-theme">漂流</router-link>
              </li>
              <li>
                <router-link to="/theme/list/6" class="secondary-list-lv-two lv-two-theme">邮轮</router-link>
              </li>
              <li>
                <router-link to="/theme/list/4" class="secondary-list-lv-two lv-two-theme">私人小团</router-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="nav-item" @mouseenter="navEnter('islands')" @mouseleave="leaveSecondaryList()">
          <router-link to="/islands"
            :class="navIndex == 'islands' ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">海岛度假</router-link>
          <div v-show="navItemShow == 'islands'" class="secondary-list">
            <ul class="periphery-list-ul periphery-periphery" style="justify-content: flex-start;">
              <li v-for="rs in islandsList" :key="rs.id" style="margin-right: 6px;">
                <router-link :to="`/line/${rs.id}`" target="_blank" class="">
                  <span style=" position: relative;">{{ rs.title }}
                    <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                  </span>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="nav-item" @mouseenter="navEnter(6)" @mouseleave="leaveSecondaryList()">
          <router-link to="/outbound"
            :class="navIndex == 6 ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">环球旅行</router-link>
        </div>
        <div class="nav-item" @mouseenter="navEnter('group')" @mouseleave="leaveSecondaryList()">
          <router-link to="/group"
            :class="navIndex == 'group' ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">企业团建</router-link>
        </div>
        <div class="nav-item" @mouseenter="navEnter(8)" @mouseleave="leaveSecondaryList()">
          <router-link to="/theme/list/11"
            :class="navIndex == 8 ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">研学亲子</router-link>
        </div>
        <div class="nav-item" @mouseenter="navEnter('company')" @mouseleave="leaveSecondaryList()">
          <router-link to="/company"
            :class="navIndex == 'company' ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">私人定制</router-link>
        </div>
        <div class="nav-item" @mouseenter="navEnter('liner')" @mouseleave="leaveSecondaryList()">
          <router-link to="/liner/102"
            :class="navIndex == 'liner' ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">邮轮</router-link>
        </div>
        <div class="nav-item" @mouseenter="navEnter('visa')" @mouseleave="leaveSecondaryList()">
          <router-link to="/visa"
            :class="navIndex == 'visa' ? 'nav-item-name nav-item-name-show' : 'nav-item-name'">签证中心</router-link>
        </div>

        <div class="home-phone">
          24小时服务电话：<span>0755-8886 6663</span>
        </div>
      </nav>

      <article class="home-banner">
        <div class="home-banner-Ctrip">
          <img src="https://admin.hqx.com.cn/Public/App/image/herder-Ctrip.png" alt="">
        </div>

        <div class="home-banner-title">专注<span>企业</span>的旅行<span>13</span>年</div>
        <div class="introduce">
          <div class="introduce-name">
            <img src="https://admin.hqx.com.cn/Public/App/image/home-img (1).png" alt=""
              style="width:12px;height:14px; padding-right: 3px;">
            ISO9001国际质量认证
          </div>
          <div class="introduce-name">
            <img src="https://admin.hqx.com.cn/Public/App/image/home-img (2).png" alt=""
              style="width:14px;height:10px;padding-right: 3px;">
            深圳市旅游协会会员单位
          </div>
          <div class="introduce-name">
            <img src="https://admin.hqx.com.cn/Public/App/image/home-img (3).png" alt=""
              style="width:14px;height:14px;padding-right: 3px;">
            国家旅游局批准出境资质许可企业
          </div>
        </div>

        <section class="mc-srh-box" @mouseenter="pauseTimer" @mouseleave="startTimer">
          <div class="mc-srh-box__tab-con">
            <div class="mc-srh-box_tabs">
              <div @click="srcTabChange(0)"
                :class="SrhTabId == 0 ? 'mc-srh-box_tab-items  mc-srh-box_tab-show' : 'mc-srh-box_tab-items'">欧洲之旅</div>
              <div @click="srcTabChange(1)"
                :class="SrhTabId == 1 ? 'mc-srh-box_tab-items  mc-srh-box_tab-show' : 'mc-srh-box_tab-items'">跨越美洲行
              </div>
              <div @click="srcTabChange(2)"
                :class="SrhTabId == 2 ? 'mc-srh-box_tab-items  mc-srh-box_tab-show' : 'mc-srh-box_tab-items'">主题游</div>
              <div @click="srcTabChange(3)"
                :class="SrhTabId == 3 ? 'mc-srh-box_tab-items  mc-srh-box_tab-show' : 'mc-srh-box_tab-items'">日本印象</div>
              <div @click="srcTabChange(4)"
                :class="SrhTabId == 4 ? 'mc-srh-box_tab-items  mc-srh-box_tab-show' : 'mc-srh-box_tab-items'">东南亚风情
              </div>
              <div @click="srcTabChange(5)"
                :class="SrhTabId == 5 ? 'mc-srh-box_tab-items  mc-srh-box_tab-show' : 'mc-srh-box_tab-items'">大西北</div>
              <div @click="srcTabChange(6)"
                :class="SrhTabId == 6 ? 'mc-srh-box_tab-items  mc-srh-box_tab-show' : 'mc-srh-box_tab-items'">七彩云南</div>
            </div>
          </div>
          <div class="mc-srh-box__forms-box">
            <div v-show="SrhTabId == 0" class="mc-srh-box__forms_tabs">
              <div v-for="rs in EuropeList" :key="rs.id" class="mc-srh-box__item_btns">
                <router-link :to="`/line/${rs.id}`" target="_blank">
                  {{ rs.title }}
                </router-link>
              </div>
            </div>
            <div v-show="SrhTabId == 1" class="mc-srh-box__forms" style="flex-wrap: wrap;">
              <div v-for="rs in America" :key="rs.id" class="mc-srh-box__item" style="width: 155px;height:55px;">
                <router-link :to="`/line/${rs.id}`" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.img}`" alt="" class="mc-srh-box__item-img">
                  <div class="mc-srh-box__item-name" style="bottom: 4px;font-size: 12px;">{{ rs.title }}</div>
                  <div class="mc-srh-box__item-shade"></div>
                </router-link>
              </div>
            </div>
            <div v-show="SrhTabId == 2" class="mc-srh-box__forms">
              <div class="mc-srh-box__item theme-items">
                <router-link to="/theme/list/11" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/App/image/family trip.jpg`" alt=""
                    class="mc-srh-box__item-img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">亲子</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item theme-items">
                <router-link to="/theme/list/5" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/App/image/league construction.jpg`" alt=""
                    class="mc-srh-box__item-img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">团建</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item theme-items">
                <router-link to="/theme/list/9" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/App/image/honeymoon.jpg`" alt=""
                    class="mc-srh-box__item-img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">蜜月</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item theme-items">
                <router-link to="/theme/list/10" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/App/image/island-img.jpg`" alt=""
                    class="mc-srh-box__item-img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">海岛</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item theme-items">
                <router-link to="/theme/list/16" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/App/image/drifting.jpg`" alt=""
                    class="mc-srh-box__item-img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">漂流</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item theme-items">
                <router-link to="/theme/list/6" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/App/image/passenger liner.jpg`" alt=""
                    class="mc-srh-box__item-img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">邮轮</div>
                </router-link>
              </div>

            </div>
            <div v-show="SrhTabId == 3" class="mc-srh-box__forms" style="">
              <div v-for="rs in japanList" :key="rs.id" class="mc-srh-box__item" style="width: 134px;height: 126px;">
                <router-link :to="`/line/${rs.id}`" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.img}`" alt="" class="mc-srh-box__item-img">
                  <div class="mc-srh-box__item-name" style="bottom: 8px;font-size: 14px;">{{ rs.title }}</div>
                  <div class="mc-srh-box__item-shade"></div>
                </router-link>
              </div>
            </div>
            <div v-show="SrhTabId == 4" class="mc-srh-box__forms" style="flex-wrap: wrap;">
              <!-- <div v-for="rs in SoutheastAsiaList" :key="rs.id" class="mc-srh-box__item">
                <router-link :to="`/line/${rs.id}`" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.img}`" alt="" class="mc-srh-box__item-img">
                  <div class="mc-srh-box__item-name">{{ rs.title }}</div>
                  <div class="mc-srh-box__item-shade"></div>
                </router-link>
              </div> -->
              <div v-for="rs in SoutheastAsiaList" :key="rs.id" class="mc-srh-box__item_btns" style="min-width: 90px;">
                <router-link :to="`/line/${rs.id}`" target="_blank">
                  {{ rs.title }}
                </router-link>
              </div>
            </div>
            <div v-show="SrhTabId == 5" class="mc-srh-box__forms">

              <div class="mc-srh-box__item northwest-items">
                <router-link to="/line/172" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2024/01/12/65a0ff68cd164.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">新疆</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item northwest-items">
                <router-link to="/line/302" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2024/01/12/65a1041e63868.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">陕西</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item northwest-items">
                <router-link to="/line/323" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2023/06/30/649e814a63c2a.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">甘肃</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item northwest-items">
                <router-link to="/line/325" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2024/01/12/65a0fa8ec30e1.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">青海</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item northwest-items">
                <router-link to="/line/327" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2024/01/12/65a0fa801f26c.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">宁夏</div>
                </router-link>
              </div>
            </div>
            <div v-show="SrhTabId == 6" class="mc-srh-box__forms">
              <div class="mc-srh-box__item yunnan-items">
                <router-link to="/line/444" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2021/07/30/6103b10f1574c.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">大理古城</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item yunnan-items">
                <router-link to="/line/169" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2021/07/30/6103b0ed1a5fb.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">丽江</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item yunnan-items">
                <router-link to="/line/170" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2021/07/30/6103b0f8743f9.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">香格里拉</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item yunnan-items">
                <router-link to="/line/305" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2021/07/30/6103b1054a633.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">大理</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item yunnan-items">
                <router-link to="/line/306" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2023/06/30/649e78fb297f1.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">昆明</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item yunnan-items">
                <router-link to="/line/441" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2023/06/30/649e79012505a.jpg`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade"></div>
                  <div class="mc-srh-box__item-name">玉龙雪山</div>
                </router-link>
              </div>
              <div class="mc-srh-box__item yunnan-items">
                <router-link to="/line/442" target="_blank">
                  <img :src="`https://admin.hqx.com.cn/Public/Uploads/Travel/Area/2024/08/23/66c829feee0ab.png`" alt=""
                    class="mc-srh-box__item-img img">
                  <div class="mc-srh-box__item-shade">
                    <img src="https://admin.hqx.com.cn/Public/Uploads/" alt="">
                  </div>
                  <div class="mc-srh-box__item-name">西双版纳</div>
                </router-link>
              </div>
            </div>
          </div>

        </section>

        <div style="position: absolute; top: 20%;  min-width: 1200px; display: flex; justify-content: center;"><img
            style="width: 800px; " src="https://admin.hqx.com.cn/Public/App/image/home-header-bg.png" alt=""></div>
      </article>
    </div>
  </header>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import areasForeign from '@/assets/dictionaries/areasForeign.js';
import areasDomestic from '@/assets/dictionaries/areasDomestic.js';
import Guangdong from '@/assets/dictionaries/Guangdong.js';
import foreignData from '@/assets/dictionaries/foreignData.js';
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";
import { member_details } from '@/api/travel.js'

const counterStore = useCounterStore();
const router = useRouter();
const route = useRoute();
let { userData } = storeToRefs(counterStore);


// 海岛列表
let islandsList = ref([]);
islandsList.value = areasForeign.filter(item => item.title == "海岛")[0].areas;

// nav选项卡二级菜单id
let navIndex = ref(1);
let navItemShow = ref(1);


// nav选项卡三级菜单id
let threeIndex = ref(-1);
let foreignId = ref(-1)
let domesticId = ref(-1);

// 选项卡滑入事件
let navEnter = (des) => {
  navIndex.value = des;
  navItemShow.value = des;
};

// 滑出菜单隐藏
let leaveSecondaryList = () => {
  navIndex.value = 1; // 恢复到默认指示点
  navItemShow.value = -1;
  threeIndex.value = -1;
}

// 出境二级滑入
let foreignEnter = (id) => {
  threeIndex.value = 2;
  foreignId.value = id;
}

// 国内二级滑入
let domesticEnter = (id) => {
  threeIndex.value = 3;
  domesticId.value = id;

}

// 出境三级菜单内容
const threeLvForeign = computed(() => {
  return areasForeign.find(item => item.id == foreignId.value);
})
const threeLvDomestic = computed(() => {
  return areasDomestic.find(item => item.id == domesticId.value);
})

// 欧洲
let EuropeList = foreignData.find(item => item.title == '欧洲').areas;
// 美洲
let America = foreignData.find(item => item.title == '美洲').areas;
// 日本
let japanList = foreignData.find(item => item.title == '日本Two').areas;
// 东南亚
let SoutheastAsiaList = foreignData.find(item => item.title == '东南亚').areas;
// tab-id
let SrhTabId = ref(3);
// 选项卡切换
let srcTabChange = (id) => {
  SrhTabId.value = id;
}
let userShow = ref('');
userShow.value = localStorage.getItem('token');

const removeUser = () => {
  counterStore.removeUser();

}

let searchValue = ref('');
const toSearch = () => {
  // return;
  if (searchValue.value) {
    const routeUrl = router.resolve({
      name: 'lienSearch',
      query: {
        name: searchValue.value
      }
    })
    window.open(routeUrl.href, '_blank')
  }
}


// banner设置
// 定时器默认值
let timer = null;
// 暂停定时器
const pauseTimer = () => {
  clearInterval(timer);
  timer = null;
}
// 启动定时器
const startTimer = () => {
  pauseTimer();
  timer = setInterval(() => {
    if (SrhTabId.value >= 6) {
      SrhTabId.value = 0;
    } else {
      SrhTabId.value++;
    }
  }, 2200)
};

// 切换到其他标签页暂停定时器
const handleVisibilityChange = () => {
  // console.log('触发',document.visibilityState)
  if (document.visibilityState === 'hidden') {
    pauseTimer();
  } else {
    startTimer();
  }
}

// // 判断是否有缓存, 无缓存请求用户信息
// const getUser = async () => {
//   // 判断是否有token
//   let token = localStorage.getItem('token');
//   // let res = await member_details();
//   // 通过pinia读取信息 判断是否已有信息
//   if (token) {

//   }

// }

// 跳转登录携带路由信息
const toLogin = () => {
  router.push({ path: '/login', query: { linkBackUrl: window.location.href } })
}



onMounted(async () => {
  // 设置定时器
  startTimer();
  document.addEventListener('visibilitychange', handleVisibilityChange);
})


// 移除定时器
onUnmounted(() => {
  pauseTimer();
  document.removeEventListener('visibilitychange', handleVisibilityChange);
});

</script>

<style lang="scss" scoped>
.herder {
  color: #fff;
  padding: 20px 0 10px;
  box-sizing: border-box;
  background-color: #2054f1;
  height: 600px;
  min-width: 1200px;
  
}

.home-box {
  max-width: 1920px;
  /* min-width: 1200px; */
  margin: auto;
}

.home-herder {
  /* max-width: 1920px;
  min-width: 1200px; */
  width: 100%;
  // padding: 0 62px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  color: #fff;
  box-sizing: border-box;
  background-color: #2054f1;
}

.logo {
  width: 124px;
  height: 60px;
}

.logo>img {
  width: 100%;
  height: 100%;
}

.header-search {
  display: flex;
  align-items: center;
  width: 436px;
  height: 44px;
  background: #f8faff;
  border-radius: 50px 50px 50px 50px;
  margin-left: 40px;

  .header-ipt {
    display: block;
    width: 360px;
    height: 36px;
    margin-left: 16px;
    background: #f8faff;
    border: none;
  }

  .search-btn {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1557ff;
    margin-left: 14px;
    border-radius: 18px 18px 18px 18px;
  }
}

.correlation {
  margin-left: auto;

  .correlation-text {
    position: relative;
    display: inline-block;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 16px;
    margin-right: 24px;
  }

  .correlation-login {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 40px;
    line-height: 40px;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #002251;
    background: #ffffff;
    // background: linear-gradient(to right, #11A4FF, #1180FF);
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
  }

  .correlation-login:hover {
    color: #3264ff;
  }

  .correlation-user {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 40px;
    line-height: 40px;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #002251;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
  }

  .correlation-user:hover {
    border-radius: 4px 4px 0 0;
  }

  .correlation-user:hover .user-list {
    // height: 150px;
    height: 40px;
    border-radius: 0 0 4px 4px;
  }

  .user-list {
    position: absolute;
    z-index: 2;
    top: 100%;
    width: 110px;
    height: 0;
    line-height: 36px;
    background-color: #fff;
    transition: height .2s ease;
    overflow: hidden;
    box-shadow: 0px 0px 20px 0px rgba(0, 22, 53, 0.05);
  }

  .user-list>div,
  .user-list>div>a {
    display: block;
    width: 110px;
    height: 36px;
    line-height: 36px;
    color: #000;
  }

  .user-list>div>a:hover {
    color: #ff5d3d;
    // background-color: #2054f1;
  }

  .correlation-program,
  .correlation-official-accounts {
    // display: none;
    position: absolute;
    top: 40px;
    left: 50%;
    z-index: 99;
    transform: translateX(-50%);
    width: 160px;
    height: 0px;
    // height: 190px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(0, 22, 53, 0.05);
    transition: height 0.2s ease;
  }

  .program-hover:hover .correlation-program {
    height: 190px;
  }

  .official-accounts-hover:hover .correlation-official-accounts {
    height: 190px;
  }

  .correlation-welcome {
    // position: absolute;
    // left: -240px;
    // line-height: 40px;
    // color: #555;
    padding-right: 80px;
  }

  .wx-QR-code {
    width: 160px;
    height: 160px;
  }

  .wx-tip {
    font-size: 12px;
    text-align: center;
    // line-height: 30px;
    color: #000;
    // margin-top: 20px;
  }
}

.home-nav {
  position: relative;
  max-width: 1920px;
  /* min-width: 1200px; */
  display: flex;
  padding: 0 50px;
  margin: 16px 0 70px;
  z-index: 99;
}

.home-phone {
  position: absolute;
  top: 0;
  right: 50px;
  font-size: 16px;
  color: #f7f7f7;
}

.home-phone>span {
  // font-size: 20px;
  color: #fff;
  // font-weight: bold;
}

.nav-item {
  position: relative;
  height: 36px;
  padding-right: 34px;
  /* // padding:0 17px; */
}

.nav-item-name {
  font-weight: 700;
  font-size: 16px;
  color: #cde0f3;
  /* // color: #F7F7F7; */
  line-height: 19px;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
}

.nav-item-name-show {
  color: #fff;
  border-bottom: 2px solid #fff;
}

.secondary-list {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 5px 0;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
  border-radius: 3px 3px 3px 3px;
  z-index: 10;
}

.secondary-list-hover:hover {
  border-radius: 3px 0 0 3px;
}

.secondary-list-hover:hover .three-level-list-hover {
  border-radius: 0 3px 3px 0;
}

.secondary-list .secondary-list-lv-two {
  display: block;
  width: 50px;
  height: 24px;
  line-height: 24px;
  font-weight: 400;
  font-size: 14px;
  color: #555555;
  padding: 5px 10px;
  cursor: pointer;
}

.secondary-list .lv-two-theme {
  position: relative;
  width: 60px !important;
}

.secondary-list .secondary-list-lv-two:hover {
  color: #000;
  background-color: #ecf5ff;
}

.three-level-list {
  position: absolute;
  left: 100%;
  top: 0;
  width: 320px;
  min-height: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 3px 3px 3px 3px;
  color: #555555;
  background-color: #fff;
}

.lv-three-areas {
  position: relative;

  display: block;
  float: left;
  font-size: 13px;
  width: 100px;
  line-height: 26px;
  /* padding: 4px 8px; */
}

.lv-three-areas>.hot-tip {
  display: inline-block;
  font-size: 14px;
  color: #f81580;
  padding-left: 2px;
  transform: translateY(-4px);
}


.lv-three-areas:hover {
  color: #0086f6;
}

.three-level-list-domestic {
  position: absolute;
  left: 100%;
  top: 0;
  width: 80px;
  min-height: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 3px 3px 3px 3px;
  color: #555555;
  background-color: #fff;
}

.lv-three-areas-domestic {
  display: block;
  float: left;
  font-size: 13px;
  width: 60px;
  line-height: 30px;
  text-align: center;
}

// 国内游新样式
.secondary-list-new {
  color: #002251;
  font-size: 14px;

  .secondary-list-new-title {
    font-size: 14px;
    font-weight: bold;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    width: 716px;
    padding: 5px 12px;
    box-sizing: border-box;

    li {
      min-width: 300px;
      margin-bottom: 6px;
    }

    li a {
      color: #002251;
    }

    .secondary-a-new {
      display: flex;

      &>a {
        position: relative;
        display: block;
        height: 40px;
        font-size: 13px;
        line-height: 40px;
        padding-right: 28px;
        color: #555555;
      }

      &>a:hover {
        color: #0086f6;
      }

      .hot-tip {
        position: absolute;
        top: -8px;
        right: 10px;
        font-size: 14px;
        color: #f81580;
      }
    }
  }
}

/* 周边游 */
.periphery-list-ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 260px;
  padding: 8px 12px;
}

.periphery-list-ul>li {

  width: 80px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}

.periphery-list-ul>li>a {
  display: block;
  // position: relative;
}

.periphery-list-ul>li>:hover {
  color: #0086f6;
}

.periphery-list-ul>li>a .hot-tip {
  position: absolute;
  top: -10px;
  right: -20px;
  font-size: 16px;
  color: #f81580;
}

.theme-hot-tip {
  position: absolute;
  top: -4px;
  right: 20px;
  font-size: 16px;
  color: #f81580;
}

/* // 顶部展示框 */
.home-banner {
  /* // max-width: 1920px; */
  width: 1200px;
  margin: auto;
  position: relative;
}

.home-banner {
  
  .home-banner-Ctrip{
    position: absolute;
    width: 319px;
    height: 47px;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 1;
  }

  .home-banner-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 1.5px;
    /* 字间距增加2像素 */
    text-align: center;
    line-height: 38px;
    color: #ffffff;
    margin-bottom: 16px;
  }

  .home-banner-title>span {
    font-size: 40px;
    color: #fff600;
  }

  .introduce {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;

    .introduce-name {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 16px;
      margin-right: 30px;
    }

    .introduce-name-img {
      /* // width: 18px; */
      /* // height: 16px; */
    }
  }
}

.mc-srh-box {
  .mc-srh-box__tab-con {
    display: flex;
    justify-content: center;
    margin-top: -23px;
    position: relative;
    top: 23px;
    z-index: 2;

    .mc-srh-box_tabs {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 827px;
      height: 54px;
      padding: 7px;
      background: rgba(15, 41, 77, 0.8);
      backdrop-filter: blur(6px);
      border-radius: 46px;
    }

    .mc-srh-box_tab-items {
      width: 107px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      color: #fff;
      border-radius: 23px 23px 23px 23px;
      margin-right: 8px;
      cursor: pointer;
    }

    .mc-srh-box_tab-show {
      color: #000;
      background: #ffffff;
    }
  }

  .mc-srh-box__forms-box {
    position: relative;
    z-index: 1;
    width: 1200px;
    height: 182px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    margin: auto;
  }

  .mc-srh-box__forms {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    height: 182px;
    color: #555;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    padding: 40px 30px 20px;
    box-sizing: border-box;

    .mc-srh-box__item {
      position: relative;
      // width: 212px;
      // height: 120px;
      width: 160px;
      height: 60px;
      border-radius: 4px;
      /* // margin-right: 30px; */
      /* // 后续改成加载中转圈图 */
      // background-image: url(https://admin.hqx.com.cn/Public/Uploads/Linelistpic/2024-03-21/65fbaaac0b349.jpg);
      /* 图片不重复 */
      background-repeat: no-repeat;
      /* 图片居中显示 */
      background-position: center center;
      /* 图片覆盖整个元素 */
      background-size: cover;
      overflow: hidden;
    }

    .mc-srh-box__item>a {
      display: block;
      width: 100%;
      height: 100%;
      transition: transform 0.3s ease;
    }

    .mc-srh-box__item>a:hover {

      transform: scale(1.1);
    }

    .mc-srh-box__item-img {
      // width: 212px;
      // height: 120px;
      // position: absolute;
      // z-index: 0;
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }

    .mc-srh-box__item-shade {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      // width: 212px;
      // height: 120px;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.21);
    }

    .mc-srh-box__item-name {
      position: absolute;
      width: 100%;
      text-align: center;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%);
      font-size: 16px;
      letter-spacing: 2px;
      /* // font-weight: bold; */
      line-height: 16px;
      color: #ffffff;
      z-index: 2;
    }
  }
}



// 主题游列表
.theme-items {
  width: 170px !important;
  height: 130px !important;
}

// 大西北列表
.northwest-items {
  width: 210px !important;
  height: 130px !important;
}

// 云南列表
.yunnan-items {
  width: 140px !important;
  height: 120px !important;
}

.mc-srh-box__forms_tabs {
  display: flex;
  // justify-content: space-between;
  // align-items: center;
  flex-wrap: wrap;
  width: 1200px;
  height: 182px;
  color: #555;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  padding: 40px 30px 20px;
  box-sizing: border-box;
}

.mc-srh-box__item_btns {
  width: 70px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin: 4px 8px;
  background: #E8F1FF;
  // border: 1px solid #000;
  border: 1px solid #E8F1FF;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px 0px rgba(0, 22, 53, 0.05);
  border-radius: 4px 4px 4px 4px;

  a {
    display: block;
    font-size: 12px;
    color: #000;
  }

  a:hover {
    color: #0086f6;
  }
}

.mc-srh-box__item_btns:hover {
  border: 1px solid #c1d0ff;
}

@media(max-width:1520px) {
  .home-phone {
    top: 55px;
  }

  .correlation-welcome {
    padding-right: 26px !important;
  }
}
</style>